<template>
      <div class="img">
        <div class="box1"></div>
        <div class="box2" onclick="window.open('https://web.mall.sx985.com/products/19?hide_return_back=true','_self')"></div>
        <div class="box3" onclick="window.open('https://web.mall.sx985.com/products/24?hide_return_back=true','_self')"></div>
        <div class="box4" onclick="window.open('https://web.mall.sx985.com/products/25?hide_return_back=true','_self')"></div>
        <div class="box5"></div>
      </div>
</template>

<script>
import Vue from 'vue';
import VueScroller from 'vue-scroller';
Vue.use(VueScroller)
import api from '../api'
export default {};
</script>
<style scoped lang="scss">
.img{
  .box1{
    background: url('../../static/summerCamp_1.png');
    background-size: 100% 100%;
  }
  .box1::after {
    content: "";
    display: block;
    // padding =  height / width;
    padding-bottom: 4769/750*100%;
  }
  .box2{
    background: url('../../static/beijin.png');
    background-size: 100% 100%;
  }
  .box2::after {
    content: "";
    display: block;
    padding-bottom: 192/750*100%;
  }
  .box3{
    background: url('../../static/jiangnan.png');
    background-size: 100% 100%;
  }
  .box3::after {
    content: "";
    display: block;
    padding-bottom: 212/750*100%;
  }
  .box4{
    background: url('../../static/wuhan.png');
    background-size: 100% 100%;
  }
  .box4::after {
    content: "";
    display: block;
    padding-bottom: 174/750*100%;
  }
  .box5{
    background: url('../../static/summerCamp_2.png');
    background-size: 100% 100%;
  }
  .box5::after {
    content: "";
    display: block;
    padding-bottom: 972/750*100%;
  }        
}
</style>
